<template>
  <div style="margin:10px">
     <!-- 签核流程 -->
     <div class="bigitem">
         <div class="ititle">
            <span class="xian"></span>
            <span class="font">{{ $t("task.approvalsflow") }}</span>
        </div>
        <el-row>
            <el-col :span="8">
            <el-form-item
                :label="$t('task.approvalsflow')"
                prop="nodeNum"

            >
                <el-select
                v-model="value.nodeNum"
                :placeholder="$t('task.approvalsflow')"
                :disabled="type=='3'"
                @change="handleChange"
                style="width: 100%"
                size="small"
                >
                <el-option
                    v-for="(item, index) in dict.type.NYIQC_MRB_AUDIT_LEVEL"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
                </el-select>
            </el-form-item>
            </el-col>
        </el-row>
       <el-row>
            <el-col :span="12" class="table-col">
              <el-form-item
                prop="templateProcessId"
              >
            <el-table class="process-table" stripe :data="value.processConfigList">
                <el-table-column
                :label="$t('task.tasknumber')"
                align="center"
                type="index"
                width="150"
                />
              <el-table-column :label="$t('task.checkman')" prop="approvalUsers">
                <template slot-scope="scope">
                  <el-form-item  size="small" :prop="`processConfigList[${scope.$index}].userList`" :rules="rules.userList">
                    <enjoy-select-user v-model="scope.row.userList" multiple :disabled="type!=1"></enjoy-select-user>
                  </el-form-item>
                </template>
              </el-table-column>
<!--                <el-table-column label="流程节点" prop="nodeName"></el-table-column>-->
                <!-- 审批角色 -->
<!--                <el-table-column
                :label="$t('task.checkrole')"
                 size="small"
                prop="approvalType"
                >
                <template slot-scope="scope">
                  <el-form-item :prop="`processConfigList.${scope.$index}.approvalType`" size="small" :rules="rules.approvalType" >
                    &lt;!&ndash;  &ndash;&gt;
                    <el-select
                    :disabled="scope.row.nodeKey=='apqp_task_001'"
                    v-model="scope.row.approvalType"
                    placeholder="请选择"
                    @change="handleChangeType($event,scope.row)"
                    clearable
                    size="small"
                    >
                    <el-option
                        v-for="(dict, index) in dict.type.APQP_APPROVAL_TYPE"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                    </el-select>
                  </el-form-item>
                </template>
                </el-table-column>-->

<!--                <el-table-column label="计划完成时间" >
                    <template slot-scope="scope">
                      <el-form-item :prop="`processConfigList.${scope.$index}.planEndDate`" size="small" :rules="rules.planComleteDate" >
                        <el-date-picker
                          size="small"
                          v-model="scope.row.planEndDate"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择日期">
                          </el-date-picker>
                      </el-form-item>
                    </template>
                </el-table-column>-->
            </el-table>
              </el-form-item>
            </el-col>
        </el-row>
        </div>
  </div>
</template>

<script>
import {getTemplateProcess, templateProcessPage} from '@/api/basic/activiti';
import EnjoySelectUser from '@/components/EnjoySelectUser';

export default {
    name:'workFlow',
    props:['roles', 'type','value','rules'],
    dicts:['APQP_APPROVAL_TYPE', 'NYIQC_MRB_AUDIT_LEVEL'],
    components:{EnjoySelectUser},
    data(){
        return {
            // ruleForm:{
            //     processConfigList:[]
            // },
            approvalsflowOp: undefined
        }
    },
  mounted(){
  },
  methods:{
      initData(){
        templateProcessPage({appName:'MRB'}).then(res=>{
            this.approvalsflowOp = res.data.rows

        })

      },
    handleChange(e){
        console.log(e)
      for(var a =[],b=0;b<e;b++){
        a.push({})
      }
      this.$emit('input',{...this.value, processConfigList: a})
    },
    handleChangeType(e,row){
      console.log(e,row);
      if(e=='0'||e=='1'){
        this.$set(row,'approvalUsersObj',null)
        this.$set(row,'approvalUsers',null)
        // row.approvalUsersObj=null
        // row.approvalUsers= null
      }
    },
    reset(){
      this.$emit('input',{...this.value, processConfigList: []})
    }
  }

}
</script>

<style scoped lang="scss">
.ititle{
  line-height: 46px!important;
}

.process-table{
::v-deep .el-form-item{
  display: flex;
  width:100%;
  margin-bottom: 0!important;
  .el-form-item__content{
    margin: 0!important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
}
</style>
